<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
    }

    .box {
        width: 1000px;
        margin: 10px auto;
    }

    nav {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-radius: 5px;
        background-color: #6959cc;
        color: #fff;
        font-size: 13px;
        display: flex;
    }

    nav div {
        margin-left: 25px;
        cursor: pointer;
        position: relative;
    }

    nav input {
        border-radius: 6px;
        height: 26px;
        margin-top: 8px;
        margin-left: 100px;
        text-indent: 5px;
    }

    .active::before {
        content: "";
        width: 30px;
        height: 2px;
        background-color: red;
        position: absolute;
        bottom: 2px;
        left: 50%;
        margin-left: -15px;
        border-radius: 10px;
    }

    .heroList {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .heroList>div {
        margin-top: 10px;
        font-size: 14px;
        text-align: center;
        margin-right: 20px;
    }
</style>

<body>
    <div id="root"></div>
</body>

<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    /* 
    
在这个生命周期获取请求数据  存到state中

map渲染数据

    */
    class App extends React.Component {
        state = {
            navList: [
                {
                    name: "全部",
                    type: "all",
                }, {
                    name: "法师",
                    type: "mage"
                }, {
                    name: "战士",
                    type: "fighter"
                }, {
                    name: "坦克",
                    type: "tank"
                }, {
                    name: "刺客",
                    type: "assassin"
                }, {
                    name: "射手",
                    type: "marksman"
                }, {
                    name: "辅助",
                    type: "support"
                }
            ],
            list: [],
            list2: [],
            list3: []
        }
       // compoentDidMount：组件渲染后 可以获取真实dom对象 可以做任意数据逻辑处理,可以调用this.setState, 通常在此生命周期发送http请求请求数据
        componentDidMount() {
            fetch('https://game.gtimg.cn/images/lol/act/img/js/heroList/hero_list.js')
                .then(res => res.json())
                .then(res => res.hero)
                .then(res => {
                    console.log(res);
                    this.setState({ list: res })
                })
        }
        changeType = (type) => {
            this.state.list2 = []
            this.state.list.map(item => {
                item.roles.includes(type) ? this.state.list2.push(item) && this.setState({ list2: this.state.list2 }) : {}
            })
        }
        selectHero = (value, list) => {
            // console.log('list',list)
            this.state.list3 = []
            if (value) {
                list.map(item => {
                    console.log(item.name, item.keywords.includes(value))
                    if (item.keywords.includes(value)) {
                        this.state.list3.push(item)
                        this.setState({ list3: this.state.list3 })

                    }
                })
            } else {
                this.setState({ list3: this.state.list3 })
            }
        }
        render() {
            console.log(this.state.list3);
            let { list, list2, list3, navList } = this.state
            return (
                <div className='box'>
                    <nav>
                        {
                            navList.map((item, index) => {
                                return <div onClick={(e) => { e.target.attributes.type.value == 'all' ? this.setState({ list2: [], list3: [] }) : this.changeType(item.type) }} type={item.type} key={index}>{item.name}</div>
                            })
                        }
                        <input type="text" placeholder="请输入" onChange={(e) => list2.length > 0 ? this.selectHero(e.target.value, list2) : this.selectHero(e.target.value, list)} />
                    </nav>
                    <div className='heroList'>
                        {
                            this.state.list3.length != 0 ?
                                list3.map((item, index) => {
                                    return (
                                        <div key={index} onClick={() => {

                                        }}>
                                            <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`} alt="" />
                                            <div>{item.name}</div>
                                        </div>
                                    )
                                })
                                : (this.state.list2.length == 0 ?
                                    list.map((item, index) => {
                                        return (
                                            <div key={index} onClick={() => {

                                            }}>
                                                <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`} alt="" />
                                                <div>{item.name}</div>
                                            </div>
                                        )
                                    }) :
                                    list2.map((item, index) => {
                                        return (
                                            <div key={index} onClick={() => {
                                            }}>
                                                <img src={`https://game.gtimg.cn/images/lol/act/img/champion/${item.alias}.png`} alt="" />
                                                <div>{item.name}</div>
                                            </div>
                                        )
                                    }))
                        }
                    </div>
                </div>
            );
        }
    }

    ReactDOM.render(<App />, document.getElementById('root'))

</script>

</html>